import "./App.scss";
import React,{useEffect,useState} from "react";
import Home from './pages/Home'
import Map from "./pages/Map";
import Earth from "./pages/Earth";
import Studyplan from "./pages/Studyplan";
import C404 from "./pages/C404";
import { Route, Switch, Redirect } from "react-router-dom";



function App() {
  const settings = JSON.parse(localStorage.getItem("settings")) || {};
  const [zoomMode, setzoomMode] = useState('');
  const [styles, setstyles] = useState('');
  useEffect(() => {
    const settings = JSON.parse(localStorage.getItem("settings")) || {};
    // console.log(`settings`, settings);
    if (settings.zoomMode == "stretch") {
      setzoomMode("stretch");
      // console.log(`123`);
    }
    if (settings.zoomMode == "cover") {
      setzoomMode("cover");
      var box = document.getElementById("cover");
      console.log(`box`, box);
      box.style.width = settings.designW +'px'; 
      console.log(`box.style.width`, box.style.width);
      console.log(`settings.designW`, settings.designW);
      box.style.height = settings.designH + "px"; 
      // console.log(`123`);
    }
    if (settings.zoomMode == "contain") {
      setzoomMode("contain");
      var box = document.getElementById("cover");
      box.style.maxWidth = settings.designW + "px";
      box.style.maxHeight = settings.designH/19.2 + "vh"; 
      // console.log(`123`);
    }
    
  }, []);
  return (
    <div id="cover" className={zoomMode}>
      <Switch>
        <Route path="/home" exact component={Home} />
        <Route path="/map" exact component={Map} />
        <Route path="/earth" exact component={Earth} />
        <Route path="/studyplan" exact component={Studyplan} />
        {/* <Route component={C404}></Route> */}
        <Redirect path="/" to="/home" />
      </Switch>
    </div>
  );
}
export default App;
